<template>
	<view>
		<u-tabbar :value="tabBarIndex" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" :border="false"
			activeColor="#6072FF" inactiveColor="#0000007F">
			<u-tabbar-item :name="item.index" :text="item.title" v-for="(item,index) in tabBarList" :key="index"
				@click="changeTabBar(item)">
				<image class="u-page__item__slot-icon" slot="active-icon" :src="item.activeIconUrl"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.inactiveIconUrl"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		name: "device-manage-tabbar",
		data() {
			return {
				staticFileUrl: this.$configPath.staticFileUrl,
				tabBarList: [{
						index: 0,
						title: '设备管理',
						activeIconUrl: '/static/image/tabbar/device-tabbar.svg',
						inactiveIconUrl: '/static/image/tabbar/device-tabbar-un.svg',
						pageUrl: '',
					},
					{
						index: 1,
						title: '设备故障',
						activeIconUrl: '/static/image/tabbar/malfunction-tabbar.svg',
						inactiveIconUrl: '/static/image/tabbar/malfunction-tabbar-un.svg',
						pageUrl: '/pages-device/device-fault/device-fault',
					},

				],
				tabBarIndex: 0,
			};
		},
		methods: {
			Load() {
				this.tabBarIndex = 0;
				const menu = this.tabBarList[this.tabBarIndex];
				console.log(menu)
			},
			changeTabBar(item) {
				this.tabBarIndex = item.index;
				uni.$emit("tabbarStats", {
					msg: '66',
					index: item.index
				})
				uni.setNavigationBarTitle({
					title: item.title
				});
				if (this.tabBarIndex == 1) {
					uni.navigateTo({
						url: item.pageUrl,
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-page__item__slot-icon {
		width: 40rpx;
		height: 40rpx;
	}
</style>